<template>
	<scroll-view scroll-y>
		<!-- 社团管理员 -->
		<view
			style="width: 95%;margin: 20rpx auto;height: 300rpx;background-color: #FFFFFF;border-radius: 20rpx;padding: 20rpx;">
			<view>
				<view style="font-size: 36rpx;font-weight: 9000;border-bottom: 1rpx solid #FEDE33;width: 180rpx;padding-bottom: 10rpx;">
					社团管理员
				</view>
			</view>
			<scroll-view scroll-x style="height: 200rpx;">
				<view style="display: flex;">
					<block v-for="(item,index) in adminClubList" :key="index">
						<view @tap="nowAdminId=index"
							style="width: 160rpx;text-align: center;padding: 15rpx;margin: 15rpx;position: relative;">
							<view v-show="index!=0&&nowAdminId==index"
								style="transition: all 0.25s linear;position: absolute;left: 0;top: 0;background-color: rgba(255, 255, 127, 0.3);width: 100%;height: 100%;border-radius: 20rpx;display: flex;justify-content: center;align-items: center;">
								<u-button @click="exitAdmin(index)" :loading="exitAdminLoading" :plain="false"
									shape="circle" size="mini" :ripple="true" type="error">取消管理员</u-button>
							</view>
							<u-image style="margin: auto;" shape="circle" ref="uImage" :width="120" :height="120"
								:src="item.userAvatar" mode="aspectFill">
								<u-loading size="44" mode="flower" slot="loading" v-if="false"></u-loading>
								<view v-if="false" slot="error" style="font-size: 24rpx;">加载失败</view>
							</u-image>
							<view class="username">
								{{item.userName}}
							</view>
							<view
								style="position: absolute;right: 0;top: 0rpx;background-color: #ff557f;font-size: 18rpx;border-radius: 20rpx;padding: 5rpx 10rpx;">
								{{item.duties}}
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<!-- 社团用户 -->
		<view style="width: 95%;margin: 20rpx auto;height: 300rpx;background-color: #FFFFFF;border-radius: 20rpx;padding: 20rpx;">
			<view>
				<view style="font-size: 36rpx;font-weight: 9000;border-bottom: 1rpx solid #FEDE33;width: 180rpx;padding-bottom: 10rpx;">
					社团用户
				</view>
			</view>
			<scroll-view scroll-x style="height: 200rpx;">
				<view style="display: flex;">
					<block v-for="(item,index) in userClubList" :key="index">
						<view @tap="nowUserId=index"
							style="width: 160rpx;text-align: center;padding: 15rpx;margin: 15rpx;position: relative;">
							<view v-show="nowUserId==index"
								style="transition: all 0.25s linear;position: absolute;left: 0;top: 0;background-color: rgba(255, 255, 127, 0.3);width: 100%;height: 100%;border-radius: 20rpx;">
								<u-button @click="settingAdmin(index)" :loading="userAdminLoading" :plain="false"
									style="margin: 30rpx 0;" shape="circle" size="mini" :ripple="true" type="success">
									设置管理员</u-button>
								<u-button @click="settingApply(index)" :loading="userAdminLoading" :plain="false"
									shape="circle" size="mini" :ripple="true" type="error">退回申请</u-button>
							</view>
							<u-image style="margin: auto;" shape="circle" ref="uImage" :width="120" :height="120"
								:src="item.userAvatar" mode="aspectFill">
								<u-loading size="44" mode="flower" slot="loading" v-if="false"></u-loading>
								<view v-if="false" slot="error" style="font-size: 24rpx;">加载失败</view>
							</u-image>
							<view class="username">
								{{item.userName}}
							</view>
						</view>
					</block>
					<view v-if="userClubList==null||userClubList.length==0">该社团无成员</view>
				</view>
			</scroll-view>
		</view>
		<!-- 用户申请 -->
		<view
			style="width: 95%;margin: 20rpx auto;height: 300rpx;background-color: #FFFFFF;border-radius: 20rpx;padding: 20rpx;">
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<view style="font-size: 36rpx;font-weight: 9000;border-bottom: 1rpx solid #FEDE33;width: 180rpx;padding-bottom: 10rpx;">
					用户申请</view>
				<view style="margin-right: 20rpx;"><text class="cuIcon-settings" style="font-size: 40rpx;"></text>
				</view>
			</view>
			<scroll-view scroll-x style="height: 200rpx;">
				<view style="display: flex;">
					<block v-for="(item,index) in clubApplyUsers" :key="index">
						<view @tap="nowApplyUserId=index"
							style="width: 160rpx;text-align: center;padding: 15rpx;margin: 15rpx;position: relative;">
							<view v-show="nowApplyUserId==index"
								style="transition: all 0.25s linear;position: absolute;left: 0;top: 0;background-color: rgba(255, 255, 127, 0.3);width: 100%;height: 100%;border-radius: 20rpx;">
								<u-button @click="adoptUserApply(index)" :loading="updateApplyStateLoading"
									:plain="false" style="margin: 30rpx 0;" shape="circle" size="mini" :ripple="true"
									type="success">通过申请</u-button>
								<u-button @click="loadClubApplyUsers(index)" :loading="updateApplyStateLoading"
									:plain="false" shape="circle" size="mini" :ripple="true" type="error">拒绝申请
								</u-button>
							</view>
							<u-image style="margin: auto;" shape="circle" ref="uImage" :width="120" :height="120"
								:src="item.userAvatar" mode="aspectFill">
								<u-loading size="44" mode="flower" slot="loading" v-if="false"></u-loading>
								<view v-if="false" slot="error" style="font-size: 24rpx;">加载失败</view>
							</u-image>
							<view class="username">
								{{item.userName}}
							</view>
						</view>
					</block>
					<view v-if="clubApplyUsers==null||clubApplyUsers.length==0">无人申请</view>
				</view>
			</scroll-view>
		</view>

		<u-modal ref="uModal" v-model="inputModalShow" :show-cancel-button="true" :show-title="false"
			@confirm="modalSubmit" style="text-align: center;padding: 20rpx;">
			<h3 style="margin-top: 20rpx;">{{inputModalTitle}}</h3>
			<input style="margin: 20rpx;" v-model="inputModalValue" :placeholder="inputModalPlaceholder" />
		</u-modal>
	</scroll-view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		props:["nowUserClub"],
		computed: mapState(['isLogin', 'loginUserInfo']),
		data() {
			return {
				userClub: null,
				nowApplyUserId: -1,
				nowUserId: -1,
				nowAdminId: -1,
				adminClubList: [],
				userClubList: [],
				clubApplyUsers: [],
				updateApplyStateLoading: false,
				userAdminLoading: false,
				exitAdminLoading: false,

				inputModalShow: false,
				inputModalTitle: "",
				inputModalValue: "",
				inputModalPlaceholder: "",
				inputModalLoading: false
			}
		},
		created() {
			this.loadNowClubUser();
			this.loadClubApplyUsers()
			console.log(this.nowUserClub)
		},
		methods: {
			loadNowClubUser() {
				uni.request({
					url: this.url.userclub.getOneClubAllUsers + "/" + this.nowUserClub.clubId,
					method: 'GET',
					header: {},
					success: (res) => {
						// console.log("得到当前社团成员", res)
						this.userClubList = res.data.userClubList
						this.adminClubList = res.data.adminClubList
					},
					fail: (res) => {
						console.log("失败 -- 得到当前社团成员", res)
					}
				});
			},
			loadClubApplyUsers() {
				uni.request({
					url: this.url.userclub.getOneClubApplyUser + "/" + this.nowUserClub.clubId,
					method: 'GET',
					header: {},
					success: (res) => {
						// console.log("得到当前全部申请的用户", res)
						this.clubApplyUsers = res.data.clubApplyUsers
					},
					fail: (res) => {
						console.log("失败 -- 得到当前全部申请的用户", res)
					}
				});
			},
			adoptUserApply(index) {
				this.updateApplyStateLoading = true
				this.userClub = this.clubApplyUsers[index];
				this.userClub.status = 1;
				console.log(this.userClub)
				this.update(this.userClub);
			},
			refuseUserApply(index) {
				this.updateApplyStateLoading = true
				this.userClub = this.clubApplyUsers[index];
				this.userClub.status = 2;
				console.log(this.userClub)
				this.inputModalTitle = "拒绝原因"
				this.inputModalPlaceholder = "请填写拒绝原因"
				// this.update(this.userClub);
			},
			settingAdmin(index) {
				this.updateApplyStateLoading = true
				this.inputModalShow = true;
				this.userClub = this.userClubList[index];
				console.log(this.userClub)
				this.userClub.admin = 1;
				console.log(this.userClub)
				this.inputModalTitle = "管理员职位"
				this.inputModalPlaceholder = "请输入管理员职位"
				// this.update(this.userClub);
			},
			settingApply(index) {
				this.exitAdminLoading = true
				this.userClub = this.userClubList[index];
				this.userClub.status = 0;
				console.log(this.userClub)
				this.update(this.userClub);
			},
			exitAdmin(index) {
				this.updateApplyStateLoading = true
				this.userClub = this.adminClubList[index];
				this.userClub.admin = 0;
				console.log(this.userClub)
				this.update(this.userClub);
			},
			update(userClub) {
				uni.request({
					url: this.url.userclub.update,
					method: 'POST',
					data: JSON.stringify(userClub),
					header: {
						"content-type": "application/json;charset=UTF-8"
					},
					success: (res) => {
						if (res.statusCode == 200) {
							console.log("权限修改成功", res)
							this.loadNowClubUser();
							this.loadClubApplyUsers()
							this.updateApplyStateLoading = false;
							this.updateApplyStateLoading = false
							this.exitAdminLoading = false;
							this.nowApplyUserId = -1
							this.nowUserId = -1
							this.nowAdminId = -1
						}
					},
					fail: (res) => {
						console.log("失败 -- 权限修改", res)
						this.updateApplyStateLoading = false;
					}
				});
			},
			// 监听子组件的tab点击事件
			tabtap(index) {
				this.tabIndex = index;
			},
			// tab滑动事件
			tabChange(e) {
				this.tabIndex = e.detail.current
			},
			toManageAdmin() {

			},
			modalSubmit() {
				if (this.inputModalTitle === "管理员职位") {
					this.userClub.duties = this.inputModalValue;
					this.inputModalTitle = ""
					this.inputModalPlaceholder = ""
					this.inputModalValue = ""
				}
				if (this.inputModalTitle === "拒绝原因") {
					this.userClub.content = this.inputModalValue;
					this.inputModalTitle = ""
					this.inputModalPlaceholder = ""
					this.inputModalValue = ""
				}
				this.update(this.userClub);
				this.userClub = null
			}
		}
	}
</script>

<style>

</style>
